import {useEffect, useRef, useState} from "react";
import {Button, Col, Form, Modal, Row, Toast} from "@douyinfe/semi-ui";
import {IconCopyAdd, IconEdit} from "@douyinfe/semi-icons";
import {addCravate, getcollegejson, getCollid} from "../../../../../api/api.js";

function Crvate_AForm() {
    const [visible, setVisible] = useState(false);
    const [treeData,settreeData] = useState(null)
    const [list3,setlist3] = useState(0)
    useEffect(()=>{
        if (visible){
            getcolljson();
        }
    },[visible])
    async function getcolljson() {
        const res = await getCollid();
        setlist3(res.data.data[0])
    }
    async function addCra(){
        let form = new FormData
        form.append("cid",api.current.getValues().cname)
        form.append("cravateName",api.current.getValues().collegename)
        const res = await addCravate(form)
        if (res.data.code==200){
            Toast.success('系部添加成功')
            handleOk()
        }else {
            Toast.success('系部添加失败')
            handleOk()
        }
    }
    function valte() {
        api.current.validate()
            .then(values=>{
                addCra()
            })
            .catch(errors=>{
                Toast.error("请重新填写表单")
            })
    }

    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
    };
    const handleCancel = () => {
        setVisible(false);
    };
    const handleAfterClose = () => {
    };
    const childRef = useRef();
    const api = useRef();

    return (
        <>
            <Button style={{marginLeft:'5px'}} onClick={showDialog} icon={<IconEdit />} theme='solid' type='primary' >添加系部</Button>
            <Modal
                okText={'Sounds great!'}
                style={{width:"30%",height:"27%"}}
                title={<div><IconCopyAdd   style={{marginRight:"10px"}} />添加系部</div>}
                visible={visible}
                onOk={handleOk}
                afterClose={handleAfterClose} //>=1.16.0
                onCancel={handleCancel}
                closeOnEsc={true}
                footer={
                    <div style={{textAlign:'center'}}>
                        <Button type="primary" onClick={()=>{valte()}}>
                            提交
                        </Button>
                    </div>

                }
            >

                <Row>
                    <Form
                        getFormApi={formApi=>api.current = formApi}
                        onSubmit={values => Toast.info({content: JSON.stringify(values)})}
                    >
                        <>
                            <Row>
                                <Col span={11}>
                                    <Form.Select
                                        rules={[
                                            { required: true, message: '' },
                                            { type: 'string', message: 'type error' },
                                            { validator: (rule, value) => value != null, message: '学院不能为空' },
                                        ]}
                                        label={'学院名'} field={'cname'} placeholder="请选择学院" style={{ width: '100%' }} optionList={list3}></Form.Select>
                                </Col>
                                <Col span={11} offset={1}>
                                    <Form.Input
                                        rules={[
                                            { required: true, message: '' },
                                            { type: 'string', message: '请输入汉字' },
                                            { validator: (rule, value) => value != null, message: '系部名不能为空' },
                                        ]}
                                        label={'系部名'} field='collegename' placeholder='请输入系部名'/>
                                </Col>
                            </Row>
                        </>

                    </Form>
                </Row>
            </Modal>
        </>
    );
}
export default Crvate_AForm